<style>
    .profile-avatar-container {
        position:relative;
        width:100px;
    }
    .profile-avatar-container .profile-user-img{
        width:100px;
        height:100px;
    }
    .profile-avatar-container .profile-avatar-text {
        display:none;
    }
    .profile-avatar-container:hover .profile-avatar-text {
        display:block;
        position:absolute;
        height:100px;
        width:100px;
        background:#444;
        opacity: .6;
        color: #fff;
        top:0;
        left:0;
        line-height: 100px;
        text-align: center;
    }
    .profile-avatar-container button{
        position:absolute;
        top:0;left:0;width:100px;height:100px;opacity: 0;
    }
    .ball {
        display: inline-block;
        border-radius: 50%;
        background-color: green;
        color: #fff;
        width: 24px;
        height: 24px;
        line-height: 24px;
    }
    .ball.no {
        background-color: #bbb;
    }
    .td .ball-cert {
        margin-top: 2px;
        display: inline-block;
        border-radius: 4px;
        background-color: #bbb;
        color: #fff;
        width: 24px;
        height: 14px;
        line-height: 14px;
        font-size: 12px;
    }
    .li {
        margin-bottom: 10px;
        display: flex;
        line-height: 24px;
        border-bottom: 1px solid #ccc;
    }
    .li.header {
        background-color: #e0c7a0;
        color: #fff;
    }
    .td{
        width: 70px;
        text-align: center;
    }
    .td span {
        margin: 0 2px;
    }
    .td.lg {
        width: 250px;
    }
    .td.list {
        width: 900px;
    }
</style>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app" class="container" style="width: 1400px;">
        你好 {{message}}
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <h2 class="page-header">{:__('caipiao')}</h2>
                        <div class="li">
                            <div class="td">期号</div>
                            <div class="td">时间</div>
                            <div class="td lg">结果</div>
                            <div class="td list">排序</div>
                        </div>
                        <div class="li header">
                            <div class="td"></div>
                            <div class="td"></div>
                            <div class="td lg"></div>
                            <div class="td list">
                                <template v-for="num in resultStatusData">
                                        <span class="ball" v-if="num">
                                            {{num}}
                                        </span>
                                    <span class="ball no" v-else>
                                            {{num}}
                                        </span>
                                </template>
                            </div>
                        </div>
                        <div class="li" v-for="(item,index) in data">
                            <div class="td">{{item.lotteryDrawNum}}</div>
                            <div class="td">{{item.lotteryDrawTime}}</div>
                            <div class="td lg">
                                <div>
                                    <span class="ball" v-for="(child,index) in item.lotteryDrawResultArr">{{child}}</span>
                                </div>
                                <div>
                                    <span class="ball-cert" v-for="(child,index) in item.lotteryDrawResultNum">{{child}}</span>
                                </div>
<!--                                <div>-->
<!--                                    <span class="ball-cert" v-for="(child,index) in item.lotteryDrawResultRate">{{child}}</span>-->
<!--                                </div>-->
                            </div>
                            <div class="td list">
                                <template v-for="num in 31">
                                        <span class="ball" v-if="ballStatus(item.lotteryDrawResultArr, num)">
                                            {{num}}
                                        </span>
                                        <span class="ball no" v-else>
                                            {{num}}
                                        </span>
                                </template>

                            </div>

                        </div>
                        <div class="li header">
                            <div class="td"></div>
                            <div class="td"></div>
                            <div class="td lg"></div>
                            <div class="td list">
                                <template v-for="num in resultStatusData">
                                        <span class="ball" v-if="num">
                                            {{num}}
                                        </span>
                                    <span class="ball no" v-else>
                                            {{num}}
                                        </span>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    const { createApp, ref } = Vue
    createApp({
        setup() {
            const caiPiao = {$listData};
            const data = ref( caiPiao );
            const resultStatusData = ref([]);
            const ballStatus = (item,value ) => {
                let status = false;
                for(citem of item) {
                    if(citem == value) {
                        status = true
                    }
                }

                return status;
            }
            data.value.map(item => {
                item.resultAll = []

                for(let i=1; i<31; i++) {
                    for(let citem of item.lotteryDrawResult) {
                        if(citem == i) {
                            item.resultAll.push()
                        }
                    }
                }
                return item
            })
            console.log(data)
            let allIndexArr = []
            for(let i=1; i<=31; i++) {
                allIndexArr[i-1] = 0
                data.value.map(item => {
                    for(let citem of item.lotteryDrawResultArr) {
                        if(citem == i) {
                            allIndexArr[i-1]++;
                        }
                    }
                })
            }
            console.log(allIndexArr)
            resultStatusData.value = allIndexArr;
            return {
                data,
                ballStatus,
                resultStatusData
            }
        }
    }).mount('#app')
</script>
